<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>资源互通关联</title>
<link type="text/css" href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="<%=basePath%>css/bootstrap-responsive.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<%=basePath%>css/jqcloud.css" />
<script type="text/javascript" src="<%=basePath%>js/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/jqcloud-1.0.3.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/bootstrap.min.js"></script>
</head>
<body id="body" style="padding: 0px;">
	<div id="container" class="container-fluid" style='height: inherit; padding-left: 25px; padding-right: 25px'>
		<div class="row-fluid">
			<div class="column">
				<nav class="navbar navbar-default" role="navigation">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">资源互通关联</a>
				</div>

				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li id="instrumentButton"><a href="javascript:void(0);">仪器</a></li>
						<li id="institutionButton"><a href="javascript:void(0);">机构</a></li>
						<li id="projectButton"  class="active"><a href="javascript:void(0);">检测项目</a></li>
						<li id="talentButton"><a href="javascript:void(0);">人才</a></li>
						<li id="baseButton"><a href="javascript:void(0);">基地</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li class="active"><a href="javaScript:void(0)" id="navt6_list" onclick="homePage('project');">返回</a></li>
					</ul>
				</div>
				</nav>
			</div>
		</div>

		<div class="row-fluid">
			<div class="span6 column">
				<c:if test="${!empty projects}">
					<div id="div3" class="panel panel-default ">
						<div class="panel-heading">
							<h3 id="loc3" class="panel-title">所在机构其他检测项目</h3>
						</div>
						<div class="panel-body">
							<div id="tagCloud" style="height: 300px;"></div>
						</div>
					</div>
				</c:if>
				<c:if test="${!empty instituion}">
					<div id="div1" class="panel panel-default ">
						<div class="panel-heading">
							<h3 id="loc1" class="panel-title">所在机构</h3>
						</div>
						<div class="panel-body">
							<table class="table table-striped table-bordered">
								<tbody>
									<c:forEach var="item" items="${instituion}">
										<c:choose>
											<c:when test="${item.key== '机构名称'}">
												<tr>
													<td>${item.key}</td>
													<td><a href="/relation/dw.ins?id=${instituion.get('机构编码')}">${item.value}</a></td>
												</tr>
											</c:when>
											<c:otherwise>
												<tr>
													<td>${item.key}</td>
													<td>${item.value}</td>
												</tr>
											</c:otherwise>
										</c:choose>
									</c:forEach>
								</tbody>
							</table>
						</div>
					</div>
				</c:if>
			</div>
			<div class="span6">
				<c:if test="${!empty project}">
					<div id="div2" class="panel panel-default ">
						<div class="panel-heading">
							<h3 id="loc2" class="panel-title">检测项目详情</h3>
						</div>
						<div class="panel-body">
							<table class="table table-striped table-bordered">
								<tbody>
									<c:forEach var="item" items="${project}">
										<tr>
											<td>${item.key}</td>
											<td>${item.value}</td>
										</tr>
									</c:forEach>
								</tbody>
							</table>
						</div>
					</div>
				</c:if>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="<%=basePath%>echarts/echarts.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>echarts/echarts-wordcloud.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>echarts/theme/macarons.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/relation.js"></script>
	<script type="text/javascript">
// 		function generateTagCloud(){
// 			var tags = [];
// 			<c:forEach var="item" items="${projects}">
// 				tags.push({
// 			    	text: "${item[1]}", 
// 			    	weight:  Math.ceil(Math.random()*3),
// 			    	link: "/relation/xm.ins?id=${item[0]}"
// 				});
// 			</c:forEach>
// 			$("#tagCloud").jQCloud(tags);
// 		}
// 		generateTagCloud();
		function generateTagCloud(){
			var tagCloud = echarts.init(document.getElementById('tagCloud'), "macarons");
			var option = {
				tooltip: {},
				series: [{
					type: 'wordCloud',
					gridSize: 20,
					sizeRange: [12, 60],
					rotationRange: [0, 0],
					shape: 'circle',
					textStyle: {
						normal: {
							color: function() {
								return 'rgb(' + [
									Math.round(Math.random() * 160),
									Math.round(Math.random() * 160),
									Math.round(Math.random() * 160)
								].join(',') + ')';
							}
						},
						emphasis: {
							shadowBlur: 10,
							shadowColor: '#333'
						}
					},
					data: []
				}]
			};
			<c:forEach var="item" items="${projects}">
				option.series[0].data.push({
			    	name: "${item[1]}", 
			    	value: "${item[0]}"
				});
			</c:forEach>
			tagCloud.on('click', function (params) {
				window.location.href = "/relation/xm.ins?id="+params.value;
	    		return;
			});
			tagCloud.setOption(option);
		}
		generateTagCloud();
	</script>
</body>
</html>